<template>
  <div class="map">
    <div
      class="chart"
      style="height: 500px"
      ref="chart"
     
    ></div>
  </div>
</template>
<script>
import { option as mapOption } from "../../assets/js/mapOption.js";
import mapJson from "../../assets/json/zjmm.json";

export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.renderMap();
  },
  methods: {
    // mapClick(params) {
    //   this.$emit("mapClick", params);
    // },
    renderMap() {
      // 或者json文件，注册地图
      this.echarts.registerMap("zjmm", mapJson);
      const charts = this.echarts.init(this.$refs.chart);
      charts.setOption(mapOption, true);
      charts.on('click',(params)=>{
        this.$emit("mapClick", params)
      })
    },
  },
};
</script>
<style lang="less" scoped>
.map{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>
